import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';

import { msg } from '@/common';
import {
  px2dp,
  mainBgColorWhite,
  fontColorBlack,
  fontColorCoffee,
  fontColorSecDeepGray,
} from '@/styles';
import { iconRightGray } from '@/images';

export default class WlAddressSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() { }

  componentWillUnmount() { }

  render() {
    const {
      selfAddressDetails,
      selfAddressName,
      selfAddressPhone,
      selfAddressId,
      selfAddressLat,
      selfAddressLog,
      rightArrow = true
    } = this.props;
    // const goodsAddressOutline = {
    //   selfAddressName,
    //   selfAddressPhone,
    //   selfAddressDetail: selfAddressDetails,
    //   selfAddressLatitude: selfAddressLat,
    //   selfAddressLongitude: selfAddressLog,
    //   id: selfAddressId,
    // };
    return (
      <TouchableOpacity
        onPress={() => {
          // msg.emit('router: goToNext', {
          //   routeName: 'OutlineMap',
          //   data: { goodsAddressOutline },
          // });
        }}
        style={[styles.addressWrap]}
      >
        <View style={styles.left}>
          <View style={styles.userInfo}>
            <Text style={styles.veticalLine} />
            <Text
              allowFontScaling={false}
              style={styles.name}
              numberOfLines={1}
            >
              {selfAddressName}
            </Text>
          </View>
          <View style={styles.address}>
            <Text
              allowFontScaling={false}
              style={styles.addressText}
              numberOfLines={1}
            >
              {selfAddressDetails}
            </Text>
          </View>
        </View>
        {
          rightArrow &&
          <View style={styles.right}>
            <Image
              style={styles.iconRightImg}
              resizeMode='stretch'
              source={iconRightGray}
            />
          </View>
        }

      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  addressWrap: {
    width: '100%',
    height: px2dp(142),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(12),
    paddingVertical: px2dp(24),
    paddingRight: px2dp(24),
    flexDirection: 'row',
    position: 'relative',
    overflow: 'hidden',
  },

  left: {
    width: px2dp(600),
    justifyContent: 'center',
  },
  right: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  iconRightImg: {
    width: px2dp(28),
    height: px2dp(28),
  },
  userInfo: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  veticalLine: {
    width: px2dp(6),
    height: px2dp(26),
    backgroundColor: fontColorCoffee,
  },
  name: {
    fontSize: px2dp(28),
    color: fontColorBlack,
    fontWeight: '700',
    marginLeft: px2dp(24),
  },
  address: {
    marginTop: px2dp(12),
    marginLeft: px2dp(28),
    flexDirection: 'row',
    alignItems: 'center',
  },
  addressText: {
    fontSize: px2dp(24),
    color: fontColorSecDeepGray,
  },
  phone: {
    marginLeft: px2dp(4),
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
  },
  phoneImg: {
    width: px2dp(24),
    height: px2dp(24),
  },
});
